/* eslint-disable */
<template>
  <div class="conditions-model">
    <div class="left">
      <div class="form-box">
        <slot
          name="search-group"
          v-if="isShow"
        ></slot>
        <template v-if="!isShow">
          <div class="list">
            <el-form
              class="mForm"
              ref="elForm"
              :model="formData"
              size="mini"
              label-width="80px"
              :inline="true"
            >
              <el-row>
                <el-col>
                  <el-form-item
                    v-if="isADMIN"
                    label="交易账号"
                    prop="userId"
                  >
                    <el-select
                      placeholder="请选择"
                      v-model="formData.userId"
                      clearable
                      size="mini"
                      style="width: 100px"
                    >
                      <el-option
                        v-for=" item in userList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item
                    label="收支类型"
                    prop="billType"
                  >
                    <el-select
                      placeholder="请选择"
                      v-model="formData.billType"
                      clearable
                      size="mini"
                      style="width: 100px"
                    >
                      <el-option
                        label="支出"
                        value="0"
                      ></el-option>
                      <el-option
                        label="收入"
                        value="1"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item
                    label="交易类型"
                    prop="tradeType"
                  >
                    <el-select
                      placeholder="请选择"
                      v-model="formData.tradeType"
                      clearable
                      size="mini"
                      style="width: 100px"
                    >
                      <el-option
                        label="消费"
                        value="0"
                      ></el-option>
                      <el-option
                        label="平台服务"
                        value="1"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item
                    label="交易时间"
                    prop="sex"
                  >
                    <el-date-picker
                      v-model="formData.date"
                      type="datetimerange"
                      range-separator="-"
                      start-placeholder="开始时间"
                      end-placeholder="结束时间"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      align="right"
                      size="mini"
                      :default-time="['00:00:00','23:59:59']"
                      style="width: 230px"
                    >
                    </el-date-picker>
                  </el-form-item>
                  <el-form-item>
                    <el-button
                      type="primary"
                      size="mini"
                      @click="_ckQuery"
                    >搜索</el-button>
                    <el-button
                      type="primary"
                      size="mini"
                      @click="_export"
                      v-auth="['operation:bill:export']"
                    >导出</el-button>
                    <slot name="button-group"></slot>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>
<script>
  import { queryUserList } from '@/conf/home/apis'
  import store from '@/conf/home/store'
  // import _ from 'lodash'
  export default {
    name: 'search',
    // eslint-disable-next-line
    data () {
      return {
        userList: [],
        formData: {
          userId: '',
          billType: '',
          tradeType: '',
          date: [],
        },
        isADMIN: store.state.user.userInfo.userType === 'ADMIN_USER',
      }
    },
    props: {
      operation: Array,
    },
    methods: {
      _export () {
        const params = {
          ...this.formData
        }
        if (params.date.length !== 0) {
          params.startDate = this.formData.date[0]
          params.endDate = this.formData.date[1]
        }
        delete params.date
        this.$emit('_export', params)
      },
      _ckQuery () {
        const params = {
          ...this.formData
        }
        if (!params.date) {
          params.startDate = ''
          params.endDate = ''
        }
        if (params.date && params.date.length !== 0) {
          params.startDate = this.formData.date[0]
          params.endDate = this.formData.date[1]
        }
        delete params.date
        this.$emit('on-conditions', params)
      },
      async getUserList () {
        try {
          const params = {
            pageNo: 1,
            pageSize: 999,
          }
          const res = await queryUserList(params)
          if (res && res.success) {
            const { totalList } = res.data
            this.userList = totalList.map(v => {
              return {
                label: v.userName,
                value: v.id,
              }
            })
          }
        } catch (error) {
          console.log('error===>', error)
        }
      }
    },
    computed: {
      // eslint-disable-next-line
      isShow () {
        return this.$slots['search-group']
      },
    },
    // eslint-disable-next-line
    created () {
      this.getUserList()
    }
  }
</script>
<style scoped lang="scss">
::v-deep .el-form-item__label {
  font-size: 12px !important;
}
::v-deep .el-form-item {
  margin-top: 0px !important;
  margin-bottom: 0px !important;
}
</style>
